<template>
  <div class="xw-h">
    <h2>xw-h: 适合封装小组件</h2>
    <table border>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
        <th>address</th>
        <th>操作</th>
      </tr>
      <tbody>
        <tr v-for="item in tableData">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.address }}</td>
          <td>
            <Btn type="edit" @clickFun="editFun(item.id)">编辑</Btn>
            <Btn type="delete" @clickFun="delFun(item.id)">删除</Btn>
          </td>
        </tr>
      </tbody>
    </table>

    <pre>
interface PropsInt {
  type: "edit" | "delete";
}
const Btn = (props: PropsInt, ctx) => {
  console.log("ctx", ctx);
  console.log("props", props);
  console.log(ctx.slots.default());

  return h(
    "button",
    {
      onClick: () => {
        console.log("click");
        ctx.emit("clickFun");
      },
    },
    // ctx.slots.default()
    ctx.slots.default()
  );
};
    </pre>
  </div>
</template>

<script setup lang="ts">
import { h, ref } from "vue";

interface dataInt {
  id: number;
  name: string;
  age: number;
  address: string;
}
const tableData = ref<dataInt[]>([
  { id: 1, name: "xw", age: 18, address: "hefei" },
  { id: 2, name: "xx", age: 18, address: "hefei" },
  { id: 3, name: "tt", age: 18, address: "hefei" },
  { id: 4, name: "mm", age: 18, address: "hefei" },
  { id: 5, name: "cyj", age: 18, address: "hefei" },
]);
interface PropsInt {
  type: "edit" | "delete";
}
const Btn = (props: PropsInt, ctx) => {
  console.log("ctx", ctx);
  console.log("props", props);
  console.log(ctx.slots.default());

  return h(
    "button",
    {
      onClick: () => {
        console.log("click");
        ctx.emit("clickFun");
      },
    },
    // ctx.slots.default()
    ctx.slots.default()
  );
};

const editFun = (data) => {
  console.log("edit fun", data);
};
const delFun = (data) => {
  console.log("delete fun", data);
};
</script>

<style lang="scss" scoped>
// table
button {
  border: 1px solid #ddd;
  padding: 5px 10px;
  background-color: #eee;
  border-radius: 4px;

  margin: 5px 5px;
}
</style>
